assignment: 한슬희 #1
Conversation
| @@ -26,7 +26,7 @@ | |||
| --> | |||
| <title>React App</title> | |||
| </head> | |||
| <body> | |||
| <body style="margin: 0"> | |||
There was a problem hiding this comment.
과제라서 이렇게 하셨겠지만, 이런 경우 emotion global style로 처리하시는게 좋을 거 가타용
| import Nav from "./components/Nav"; | ||
| import profile from "./image/profile.jpg"; | ||
| import Comment from "./components/Comment"; | ||
|
|
||
| function App() { | ||
| return ( | ||
| <div> |
There was a problem hiding this comment.
시맨틱 태그에 대해서 공부해보고 적용해보시면 좋을 거 같아용 👍
src/components/Comment.tsx
Outdated
| } | ||
|
|
||
| function Comment() { | ||
| const [comment, setComment] = useState<IComment[]>([]); |
There was a problem hiding this comment.
댓글들이 저장되어 있는 상태라, 이름을 복수형으로 짓는 것이 좋지 않을까요?
src/components/Comment.tsx
Outdated
| <button css={buttonWrapper}>확인</button> | ||
| </form> | ||
| <div css={commentSort}> | ||
| {comment.map((todo: IComment) => ( |
There was a problem hiding this comment.
| {comment.map((todo: IComment) => ( | |
| {comment.map((todo) => ( |
여기서는 type을 따로 지정해주지 않으셔도 타입 추론이 되는데, 따로 지정해주신 이유가 있으실까요??
There was a problem hiding this comment.
그리고 댓글들이 리스트 렌더링되는 것인데, todo라는 이름은 부적절한 거 같아요
| const text = css` | ||
| font-size: 1.1rem; | ||
| font-weight: 700; | ||
| `; |
There was a problem hiding this comment.
emotion 사용이 나중에 관리할 때 더 쉬울 것 같다는 생각이 들었어요.
다음 번에 저도 꼭 사용해보겠습니다..😳
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 4px; | ||
| width: fit-content; |
There was a problem hiding this comment.
fit-content로 width 속성값을 설정하는 것을 아직 한 번도 사용을 해보지 않았는데,
슬희님 만드신 거 보면서 저도 꼭 사용을 해봐야겠다는 생각이 들었습니다!
| <Inform title="🎁 Date of birth" summary="2001.03.26" /> | ||
| <Inform title="✍🏻 Student ID" summary="202014135" /> | ||
| <Inform title="✉️ E-mail" summary="[email protected]" /> |
There was a problem hiding this comment.
이모티콘 활용을 정말 잘 하시는 것 같아요!
그리고 Inform 컴포넌트에서 가져와서 사용하시는 모습을 보고 깔끔하게 코딩을 잘 하시는 것 같아요..!
주소: https://b4lnnv.csb.app/